<!--
 * @Author: zxh
 * @Email: 1271027008@qq.com
 * @Date: 2020-03-05 11:10:36
 * @Descripttion: 
 -->
<div class="left_dictionary">
    <div nz-row class="row_1">
        <span>字典列表</span>
        <button nz-button nzType="primary" nzSize="small" (click)="handleShowListModal(-1)" *ngIf="bornRole.add">
            <i nz-icon nzType="plus"></i>新增</button>
    </div>
    <div nz-row class="row_2">
        <div nz-col nzSpan="20">
            <input appHotSearch (hotSearchEmit)="hotSearch()" nz-input [(ngModel)]="listBlurry"
                placeholder="输入名称或者描述搜索" />
        </div>
        <!-- <div nz-col nzSpan="3" class="operate_btn">
            <button nz-button nzType="" (click)="handleListSearch()">
                <i nz-icon nzType="search"></i>搜索
            </button>
        </div> -->
    </div>

    <div nz-row class="row_3">
        <nz-table #basicTable [nzData]="listData" [nzFrontPagination]="false" [nzBordered]="true" nzSize="small">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of basicTable.data" (click)="handleViewDetail(data.name, data.id)" [class]="selectDict==data.id?'ant-table-row ng-star-inserted active':'ant-table-row ng-star-inserted'">
                    <td>{{ data.name }}</td>
                    <td>{{ data.remark }}</td>
                    <td>
                        <button nz-button nzType="primary" style="margin-right: 4px;"
                            (click)="handleShowListModal(data.id, data)" *ngIf="bornRole.edit">
                            <i nz-icon nzType="edit"></i>
                        </button>
                        <button nz-button nzType="danger" style="margin-right: 4px;"
                            (click)="handleShowDeleteModal(data.id)" *ngIf="bornRole.del">
                            <i nz-icon nzType="delete"></i>
                        </button>
                        <!-- <button nz-button nzType="default" (click)="handleViewDetail(data.name, data.id)">
                            <i nz-icon nzType="eye" nzTheme="outline"></i>
                        </button> -->
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
    <div nz-row class="row_4">
        <div nz-col class="page_box">
            <nz-pagination (nzPageIndexChange)="listPageChange($event)" [nzPageIndex]="listPage" [nzTotal]="listCount"
                [nzPageSize]="pageSize" [nzShowTotal]="totalTemplate"></nz-pagination>
            <ng-template #totalTemplate let-total> 总共 {{ listCount }} 条 </ng-template>
        </div>
    </div>
</div>
<div id="modal_box_1"></div>
<nz-modal nzMaskClosable="false" appDragModal [nzGetContainer]="modalDomBox" [(nzVisible)]="isListVisible" [nzTitle]="listSelectedId===-1?'新增字典':'编辑字典'" (nzOnCancel)="handleListCancel()" [nzFooter]="null"
    class="hmodal">
    <form nz-form [formGroup]="listValidateForm" (ngSubmit)="handleListSubmit()">
        <div nz-row>
            <div nz-col nzSpan="24">
                <nz-form-item>
                    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>字典名称</nz-form-label>
                    <nz-form-control [nzSm]="20" [nzXs]="24" nzErrorTip="输入字典名称">
                        <input nz-input formControlName="listName" [(ngModel)]="listName" placeholder="输入字典名称" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>描述</nz-form-label>
                    <nz-form-control [nzSm]="20" [nzXs]="24" nzErrorTip="请输入备注">
                        <input nz-input formControlName="listRemark" [(ngModel)]="listRemark" placeholder="请输入备注" />
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleListCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isListOkLoading">确定</button>
            </div>
        </div>
    </form>
</nz-modal>